<template>
    <view class="news-item  border-bottom ">
        <view class="flex-row jc-between ai-center size-24 color-6  border-bottom p-20">
            <view class="flex-row ai-center">
                <image class="borderRadius-10" :src="newsItem.userInfo.headImageUrl" style="width: 60rpx;height: 60rpx;"
                    mode=""></image>
                <view class="flex-colum m-left-10">
                    <text>{{newsItem.userInfo.name}}</text>
                    <text style="color:#FF8040;">{{newsItem.userInfo.level}}</text>
                </view>
            </view>
            <view class="color-9">{{newsItem.created_at}}</view>
        </view>
        <view class="news-text  border-bottom  p-20 size-30 color-3">
            <view class="omit-3 m-botoom-10">
                {{newsItem.comment}}
            </view>
            <view class="image-area" v-if="newsItem.commentImages.length>1">
                <image v-for="(commentImageItem,commentImageIndex) in newsItem.commentImages" :src="commentImageItem"
                    :key="commentImageIndex"></image>
            </view>
            <view v-else-if="newsItem.commentImages.length>0">
                <image :src="newsItem.commentImages[0]" style="width: 100%;height: 500rpx;" mode=""></image>
            </view>
        </view>
        <view class="flex-row jc-between ai-center size-24 color-6 p-20">
            <view class="buyGoods flex-row ai-center">
                <image v-for="(localGoodsItem,localGoodsIndex) in localGoods" :src="localGoodsItem"
                    style="width: 100rpx;height: 100rpx;" :key="localGoodsIndex"></image>
                等{{newsItem.goods.length}}件商品
            </view>
            <view class="flex-row ai-center">
                <view class="m-right-20">
                  <u-icon v-if="newsItem.is_like==0" name="thumb-up" size="40"  @click="newsItem.is_like=1" ></u-icon>
                  <u-icon v-if="newsItem.is_like==1" name="thumb-up-fill" size="40" @click="newsItem.is_like=0"></u-icon>  
                </view>
                <g-button type="default"  size="mini"  >评论</g-button>
            </view>
        </view>
        <u-gap height="20" bgColor="#eee"></u-gap>
    </view>
</template>

<script>
    export default {
        props: {
            newsItem: {
                type: Object,
            },
        },
        computed: {
            localGoods() {
                if (this.newsItem.goods.length > 3) {
                    let str = this.newsItem.goods.splice(0, 3)
                    console.log(this.newsItem.goods)
                    return str
                } else {
                    return this.newsItem.goods
                }

            }
        },
        data() {
            return {

            }
        },
    }
</script>

<style lang="scss" scoped>
    .news-item {
        .news-text {

            // height: 200rpx;
            image {
                width: 220rpx;
                height: 220rpx;
                margin: 0 5rpx;
            }
        }

        .buyGoods {
            image {
                border: 1rpx solid #eee;
                margin: 0 5rpx;
            }
        }
    }
</style>
